import { Link } from '@brillout/docpress'
import RouteDomainDriven from '../../components/RouteDomainDriven.mdx'

For a page `/pages/movie/+Page.js`, you can define its Route String in an adjacent file `/pages/movie/+route.js`.

```js
// /pages/movie/+route.js

// Match URLs such as /movie/123 or /movie/abc
export default '/movie/@id'
```

> Route Strings and <Link href="/route-function">Route Functions</Link> override <Link href="/filesystem-routing">Filesystem Routing</Link>. If you always use Route Strings and Route Functions then you effectively opt-out of Filesystem Routing.

The value `@id` is available at `pageContext.routeParams.id`.

```
URL                   MATCH    pageContext.routeParams.id
==================    =====    ==========================
/movie/123            ✅       123
/movie/abc            ✅       abc
/movie/9Ab(@29!c      ✅       9Ab(@29!c
/movie/123/reviews    ❌
/movie                ❌
```

You can define:
 - Multiple parameters, for example `/movie/@category/@name`.
 - <Link href="#globs">Globs</Link>, for example `/movie/*` to also match `/movie/123/reviews`.

For more advanced routing logic, consider using a <Link href="/route-function">Route Function</Link> instead of a Route String.


## Globs

```js
// /pages/product/+route.js

export default '/product/*'
```

```
URL                         MATCH /product/@id    MATCH /product/*    MATCH /product*
========================    ==================    ================    ===============
/product/123                ✅                    ✅                  ✅
/product/123/nested         ❌                    ✅                  ✅
/product/123/nested/path    ❌                    ✅                  ✅
/product                    ❌                    ❌                  ✅
```


The value of the glob is available at `pageContext.routeParams['*']`, for example for the Route String `/product/*`:

```
URL                          pageContext.routeParams['*']
=========================    ============================
/product/123                 123
/product/123/nested          123/nested
/product/123/nested/path/    123/nested/path/
```

If you define multiple globs (e.g. `/*/movie/@id/*`), their values are available at:
 - `pageContext.routeParams['*1']`
 - `pageContext.routeParams['*2']`
 - `pageContext.routeParams['*3']`
 - ...


## Catch-All

You can use a <Link href="#globs">glob</Link> to catch all URLs:

```js
// /pages/catch-all/+route.js

// Route all URLs to a single page
export default '*'
```

```js
// /pages/catch-all/+Page.js

// The single page of our app.
export { Page }

// ...
```


## Precedence

Upon Route String conflicts, Vike chooses the first route from most specific to least specific.

See <Link href="/routing-precedence" />.


## Escape `@`

The special character `@` cannot be escaped, use a [Route Function](/route-function) instead.

## Domain-driven file structure

<RouteDomainDriven />

## See also

 - <Link href="/routing" />
